<template>
    <footer class="footer">
        <div :class="'table type' + type">
            <div class="row left">
                <img class="logo" src="@assets/imgs/logo.png" />
                <span class="logo_text">{{ logo_text }}</span>
                <p class="copyright">{{ 'Copyright © 2020 ' + this.$t('common.company') + ' All Rights Reserved' }}</p>
                <img class="copyright_img" src="@assets/imgs/common/cr_1.png" />
                <img class="copyright_img" src="@assets/imgs/common/cr_2.png" />
                <img class="copyright_img" src="@assets/imgs/common/cr_3.png" />
                <img class="copyright_img" src="@assets/imgs/common/cr_4.png" />
                <img class="copyright_img" src="@assets/imgs/common/cr_5.png" />
                <img class="copyright_img" src="@assets/imgs/common/cr_6.png" />
            </div>
            <template v-if="type === 1">
                <div class="row" v-for="row of menu" :key="row.title">
                    <div class="menu">
                        <h4 class="menu_title">{{ row.title }}</h4>
                        <span class="menu_item pointer" v-for="item of row.list" :key="item.text">{{ item.text }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="menu">
                        <h4 class="menu_title">{{ $t('footer.contact.title') }}</h4>
                        <span class="menu_item">{{ $t('footer.contact.customer_service') + '：grinok2020@qq.com' }}</span>
                        <span class="menu_item">{{ $t('footer.contact.business_cooperation') + '：grinok2019@qq.com' }}</span>
                        <div class="download">
                            <img class="img" src="@assets/imgs/common/download_android.png" />
                            <p class="text">{{ $t('footer.download_android') }}</p>
                        </div>
                        <!-- <div class="download">
                            <img class="img" src="@assets/imgs/common/download_ios.png" />
                            <p class="text">{{ $t('footer.download_ios') }}</p>
                        </div> -->
                    </div>
                </div>
            </template>
            <!-- <template v-if="type === 2">
                <div class="row">
                    <div class="menu">
                        <h4 class="menu_title">合作交流</h4>
                        <span class="menu_item">QQ：123456</span>
                        <span class="menu_item">123456（笑脸矿业交流群3）</span>
                    </div>
                </div>
                <div class="row">
                    <div class="menu">
                        <h4 class="menu_title">商务合作</h4>
                        <img class="img" src="@assets/imgs/common/imgs.jpg" />
                    </div>
                </div>
                <div class="row">
                    <div class="menu">
                        <h4 class="menu_title">加入微信群</h4>
                        <img class="img" src="@assets/imgs/common/imgs.jpg" />
                    </div>
                </div>
                <div class="row">
                    <div class="menu">
                        <h4 class="menu_title">平台微博</h4>
                        <img class="img" src="@assets/imgs/common/imgs.jpg" />
                    </div>
                </div>
            </template> -->
        </div>
        <!--<div class="remarks_box">-->
            <!--<span class="text">ICP主体备案号:粤ICP备2020079489号</span>-->
            <!--<span class="text">主办单位名称:深圳古灵阁科技有限公司</span>-->
        <!--</div>-->
    </footer>
</template>

<script>
    export default {
        name: "Footer",
        props: {
            type: {             // 底部的类型，暂时有两种
                type: Number,
                default: 1
            }
        },
        data: function() {
            return {
                menu: []
            }
        },
        methods: {
            jumpURL: function(path, query) {
                if(this.$route.path === path) {
                    // 如果是当前页面，直接修改参数并且刷新
                    this.$router.replace({ query: { text: query.text } });
                    window.location.reload();
                } else {
                    // 如果不是当前页面，正常跳转
                    this.$router.push({ path, query });
                }
            },
        },
        mounted: function() {
            const that = this;
            this.menu = this.$t('footer.menu');

            this.$nextTick(function() {
                // 通过点击的文字和现有文案匹配，是否有对应的文案
                $('.menu_item.pointer').click(function() {
                    const text = $(this).text();
                    const articles = ["平台简介","分销说明","用户协议","隐私政策","免责声明","哈哈金币","费率说明","APP下载","常见问题","联系我们"];

                    if (articles.indexOf(text) > -1) {
                        that.jumpURL('/others/article', { text });
                    } else {
                        that.$notification.error({
                            message: '操作错误！！',
                            description: '暂未开放，敬请期待！！'
                        });
                    }
                });
            });
        },
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .footer{
        width: 100%;
        color: white;
        font-size: 14px;
        background-color: #31384a;
        .table{
            display: table;
            margin: 0 auto;
            padding: 40px 0;
        }
        .row{
            display: table-row;
            float: left;
            &.left{
                margin-right: 40px;
                box-sizing: border-box;
                .img{
                    display: block;
                }
                .logo{
                    width: 34px;
                    margin: 0;
                    vertical-align: super;
                }
                .logo_text{
                    margin-left: 10px;
                    font-size: 24px;
                    vertical-align: text-bottom;
                }
                .copyright{
                    margin: -4px 0 0 -18px;
                    font-size: 12px;
                    color: white;
                    opacity: 0.4;
                    transform: scale(0.9);
                }
                .copyright_img{
                    margin: 20px 20px 0 0;
                    height: 20px;
                }
            }
        }
        .remarks_box{
            line-height: 40px;
            font-size: 13px;
            text-align: right;
            color: #999;
            background-color: #222D44;
            >.text{
                margin-right: 40px;
            }
        }
    }
    .menu{
        margin: 0 40px;
        .menu_title{
            margin-bottom: 10px;
            font-weight: 700;
            color: inherit;
        }
        .menu_item{
            display: block;
            line-height: 30px;
            font-size: 12px;
        }
        .download{
            display: inline-block;
            margin: 20px 10px 0 0;
            .img{
                width: 80px;
                margin-bottom: 4px;
            }
            .text{
                font-size: 10px;
                opacity: 0.4;
            }
        }
        .img{
            width: 80px;
        }
    }
    .type2 {
        .menu {
            text-align: center;
            .menu_title{
                font-size: 18px;
            }
            .menu_item{
                font-size: 13px;
            }
        }
    }
    @media screen and (max-width: @small_view) {
        .footer .row{
            display: inline-block;
            width: 25%;
            float: none;
            vertical-align: text-top;
            &:nth-child(-n+2){
                width: 50%;
                margin-bottom: 20px;
            }
            &.left{
                margin-right: 0;
                padding-left: 80px;
            }
            .menu{
                margin: 0;
            }
        }
    }
</style>
